<template>
  <div>
    <el-form label-width="80px">
      <el-form-item
        label="练习类型"
        size="small"
      >
        <el-radio-group
          :disabled="editorDisabled"
          v-model="formContent.type"
          @change="handleTypeChanged"
        >
          <el-radio :label="1">年度复训</el-radio>
          <el-radio :label="2">专项培训</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="练习标题">
        <el-input
          size="small"
          v-model="formContent.title"
          :disabled="editorDisabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="复训年度">
        <el-select
          size="small"
          :disabled="editorDisabled"
          v-model="formContent.year"
          placeholder="请选择"
          style="width:100%"
        >
          <el-option
            v-for="item in years"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计分周期">
        <el-select
          size="small"
          :disabled="editorDisabled"
          v-model="formContent.cycle"
          placeholder="请选择"
          style="width:100%"
        >
          <el-option
            v-if="formContent.type==2"
            label="不加入复训计分"
            :value="-1"
          >
          </el-option>
          <el-option
            v-for="item in [1,2,3,4,5,6,7,8,9,10]"
            :key="item"
            :label="'第'+item+'轮复训'"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="适用范围">
        <el-select
          size="small"
          :disabled="editorDisabled"
          v-model="formContent.office"
          placeholder="请选择"
          style="width:100%"
        >
          <el-option
            v-for="item in offices"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="练习科目">
        <!-- <el-cascader
              :options="subjects"
              :props="{ multiple: true ,label:'label',value:'label',children:'children'}"
              clearable
              style="width:100%"
              v-model="formContent.subjects"
            ></el-cascader> -->
        <el-select
          size="small"
          :disabled="editorDisabled"
          v-model="formContent.subjects"
          multiple
          style="width:100%"
          placeholder="请选择"
        >
          <!-- collapse-tags -->
          <el-option-group
            v-for="group in subjects"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="item in group.children"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
              <span style="float: left">{{ item.label }}</span>
                <span :style="{float: 'right', color: item.options.length===0&&formContent.subjects.indexOf(item.label)>-1?'#F56C6C':'', fontSize: '13px'}">({{ item.options.length }}预设)</span>
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="学时数">
        <el-select
          size="small"
          :disabled="editorDisabled"
          v-model="formContent.hours"
          placeholder="请选择"
          style="width:100%"
        >
          <el-option
            v-for="item in [0.5,1,1.5,2,2.5,3]"
            :key="item"
            :label="item+'学时'"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起始日期">
        <el-date-picker
          size="small"
          v-model="formContent.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width:100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止日期">
        <el-date-picker
          size="small"
          v-model="formContent.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width:100%"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="练习说明">
        <el-input
          size="small"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="formContent.description"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="最后提交">
        <el-tag type="success">{{formContent.author}}</el-tag>
      </el-form-item>

    </el-form>
    <div style="text-align:center">
      <!-- <el-button
            size="small"
            style="width:60px"
            @click="handleEditorReset"
          >重置</el-button> -->
      <el-button
        size="small"
        style="width:60px"
        @click="editorVisible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="small"
        style="width:120px"
        @click="handleEditorSave"
      >保存</el-button>
    </div>
  </div>
</template>

<script>
  import { format } from "@/utils/datetime.js";
  export default {
    name: "formView",
    data() {
      return {
        formContent: {
          number: null,
          title: "",
          year: "",
          cycle: 1,
          type: 1,
          office: "",
          subjects: [],
          hours: 1,
          startDate: "",
          endDate: "",
          description: "",
          author: "",
          updateTime: null,
          valid: 1,
          disposed: 0,
        }
      }
    },
    computed: {
      subjects() { return this.$store.state.params.subjects },
      offices() { return this.$store.state.params.userAttribs.exerciseOffice },
      years() {
        let years = [];
        for (let i = 1; i >= -1; i--) {
          years.push(new Date().getFullYear() + i);
        }
        return years;
      },
      editorDisabled() {
        if (this.formContent.number != null && this.formContent.author != this.$store.getters.userName) {
          return true;
        }
        return false;
      },
    },
    methods: {
      dateFormat: format,
      openWithCreate() {
        this.resetFormContent();
      },
      openWithModify(content) {
        this.formContent = content;
      },
      handleTypeChanged(val) {
        if (val == 1) {
          this.formContent.title = "终端管制室模拟机复训（练习n）";
          if (this.formContent.cycle == -1) {
            this.formContent.cycle = 1;
          }
        }
        else if (val == 2) {
          this.formContent.title = "终端管制室模拟机专项培训（xxxx练习）";
        }
      },
      handleEditorSave() {
        let data = this.formContent;
        if (data.title.length < 5) {
          this.$notify.error("标题长度至少输入5个字符");
          return;
        }
        if (data.cycle === 0) {
          this.$notify.error("请选择计分周期");
          return;
        }
        if (data.office == "") {
          this.$notify.error("未选择练习所属科室");
          return;
        }
        if (data.subjects.length < 1) {
          this.$notify.error("科目至少选择1个");
          return;
        }
        this.$store.dispatch("saveExercise", this.formContent).then(
          () => {
            this.$notify.success("保存成功");
            this.$emit('update');
            this.$emit('close');
          }
        )
        // .catch(
        //   error => {
        //     this.$notify.error(JSON.stringify(error));
        //   }
        // )
      },
      resetFormContent() {
        this.formContent.number = null;
        // this.formContent.title = this.dateFormat("yyyy") + "年度终端管制x室复训（练习x）";
        this.formContent.title = "终端管制室模拟机复训（练习n）";
        this.formContent.year = this.dateFormat("yyyy");
        this.formContent.subjects = ["冲突解脱", "相似航班号处置", "大流量下的空管运行", "等待程序"];
        this.formContent.hours = 1;
        this.formContent.startDate = this.dateFormat("yyyy-MM-dd");
        this.formContent.endDate = this.dateFormat("yyyy-MM-dd", new Date(new Date().getTime() + 60 * 24 * 60 * 60 * 1000));
        this.formContent.description = "";
        this.formContent.updateTime = null;
        this.formContent.author = this.$store.getters.userName;
        this.formContent.valid = 1;
        this.formContent.disposed = 0;
      },
    },
  }
</script>

<style>

</style>